<!-- 
    树形菜单
    props:
    isCollapse
 -->
<template>
    <el-scrollbar style="height: 100vh;">
        <el-row>
            <el-col>
                <el-menu :collapse="isCollapse" active-text-color="#ffd04b" background-color="#304156"
                    class="el-menu-demo" :default-active="$route.path" text-color="#fff" router>
                    <el-menu-item :index="'/index/' + item.path" v-for="(item, index) in menus.slice(0, 1)">
                        <el-icon>
                            <i :class="'iconfont ' + item.meta.icon"></i>
                        </el-icon>
                        <span>{{ $t(item.meta.title) }}</span>
                    </el-menu-item>
                    <el-sub-menu :index="item.path" v-for="(item, index) in menus.slice(1)" :key="item.name">
                        <template #title>
                            <el-icon>
                                <i :class="'iconfont ' + item.meta.icon"></i>
                            </el-icon>
                            <span>{{ $t(item.meta.title) }}</span>
                        </template>
                        <el-menu-item :index="'/index/' + item.path + '/' + items.path"
                            v-for="(items, index) in item.children?.filter(v=>v.name!='productlistcreate'&&v.name!='productlistmodify')" :key="items.name">
                            {{ $t(items.meta.title) }}
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-col>
        </el-row>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import menus from "@/router/page";

const props = defineProps({isCollapse:{type:Boolean,default:false}})//接收父组件传值
</script>

<style lang="less" scoped>
.el-menu {
    border: 0;

    &:not(.el-menu--collapse) {
        width: 220px;
    }
}

.el-sub-menu .el-menu-item {
    text-indent: .3em;

}
</style>